<template>
    <div class="logo-container">
      <el-button size="medium" type="primary" icon="el-icon-plus" @click="addDrawer">新增</el-button>

      <div class="table-origin">
        <my-table :columns="columns" :data="list.slice((currentPage-1)*pageSize, currentPage*pageSize)" stripe border>
          <!-- <template v-slot:logoName="{logoName}">
            <div class="logoName">
              <img src="https://mrhj.gitee.io/form-generator/img/logo.e1bc3747.png" />
              <span>航天云膜</span>
            </div>
          </template> -->
          <template v-slot:logoState="{row,$index}">
            <el-switch
              v-model="row.logoState"
              :active-value="0"
              :inactive-value="-1"
              active-color="#13ce66"
              inactive-color="#cccccc"
              @change='changSwitch($event,row,$index)'>
            </el-switch>
          </template>
          <template v-slot:action="{row,$index}">
            <el-button style="margin-right: 10px;" plain size="mini" type="primary" @click="showEditLogo($index,row)">编辑</el-button>
            <template>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteLogo(row.logoId)"
            >
              <el-button plain slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
            </template>
          </template>
          <template v-slot:date.header="{column}">
            <el-tag size="small">{{column.label}}</el-tag>
          </template>
        </my-table>
        <template>
          <div class="block">
            <el-pagination
              align='right'
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
              :page-size=pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=list.length>
            </el-pagination>
          </div>
        </template>
      </div>

      <addLogo ref="addLogoRef"></addLogo>
    </div>
</template>

<script>
  import addLogo from './code/addLogo.vue'
  import { logoList, logoDelete, logoUpdateState } from '@/api/logo'
  import {str2Date} from '@/utils/common'
  export default {
    data() {
      return {
        currentPage: 1, // 当前页
        pageSize: 5, // 每页显示的数量
        columns: [{
            type: 'index',
            label: '#'
          },
          {
            label: 'Logo名称',
            prop: 'logoName'
          },
          {
            label: '添加时间',
            prop: 'createTime'
          },
          {
            label: '状态',
            prop: 'logoState'
          },
          {
            label: '操作',
            prop: 'action',
            width: 230
          }
        ],
        list: []
      }
    },
    components: {
      addLogo
    },
    mounted() {
      this.loadLogoList();
    },
    methods: {

      // 加载 logo列表
      async loadLogoList() {
        var res = await logoList();
        for (var i = 0; i < res.data.length; i++) {
          // 列表里字段 时间转换
          res.data[i].createTime = str2Date(res.data[i].createTime)
        }
        this.list = res.data;
      },

      // 开关切换
      changSwitch(event, row, index) {
        var params = {
            logoId: row.logoId,
            state: event
        };
        logoUpdateState(params);
      },

      // 添加 logo 抽屉弹窗
      addDrawer() {
        this.$refs.addLogoRef.open()
      },
      showEditLogo(index, row) {
        this.$refs.addLogoRef.open(row.logoId)
      },
      async deleteLogo(logoId) {
        var res = await logoDelete(logoId)
        this.$utils.showSuccessMessage(res.msg);
        this.loadLogoList();
      },

      handleSizeChange: function(pageSize) { // 每页条数切换
        this.pageSize = pageSize
      },
      handleCurrentChange: function(currentPage) { // 页码切换
        this.currentPage = currentPage
      }
    }
  }
</script>

<style scoped>
  .logo-container {
    padding: 10px;
  }
  .logoName{
    display: flex;
    align-items: center;
  }
  .logoName img{
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin-right: 8px;
  }
  .table-origin{
    margin-top: 20px;
  }
</style>
